<template>
	<view class="page-container">
		<scroll-view scroll-y="true" class="menu-container" scroll-with-animation="true">
			<view :class="active  === index ? 'menu-item menu-item--active' : 'menu-item'" 
			v-for="(item, index) in lev1Data" 
            :key="index" 
			@tap="active = index">
				{{ item.name }}
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="main-container" scroll-with-animation="true">
			<view v-for="(item,lev2Index) in lev2Data" :key="lev2Index">
                <view class="main-part">
                    <view class="main-part-caption">
                        {{ item.name }}
                    </view>
                    <view style="display: flex;flex-wrap: wrap;">
                        <view class="main-part-item" v-for="(item,lev3Index) in item.cateLabelList" :key="lev3Index"
                        @tap="sortHandle(lev2Index, lev3Index)">
                            <view class="main-part-item-img">
                                <image :src="item.labelPicUrl" mode=""></image>
                            </view>
                            <view class="main-part-item-txt">
                                {{ item.labelName }}
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 二级分类的分割区域, 如果不是最后一个二级分类就显示 -->
                <view v-if="lev2Index !== lev2Data.length -1" style="height:20rpx;background-color: #F3F5F7"></view>
            </view>
		</scroll-view>
	</view>
</template>

<script>
import Api from '@/common/api';
export default {
	name: 'sort',
	data () {
		return {
            // 一级分类选中
            active: '',
            // 一级分类数据
            lev1Data: [],
            // 二级分类数据
            lev2Data: []
		};
    },
    watch: {
        active() {
            // 一级分类选中发生改变后, 请求二级分类数据
            let lev1Item = this.lev1Data[this.active];
            this.getLev2Data(lev1Item.id);
        }
    },
    created() {
        // 请求一级分类数据
        this.getLev1Data();
    },
	methods: {
        // 点击三级分类
		sortHandle(lev2Index, lev3Index) {
            var url = '/pages/langwen/sort2'
            var param = {
                lev1Id: this.lev1Data[this.active].id,
				lev1Title: this.lev1Data[this.active].name,
                lev2: lev2Index + 1,
                lev3: lev3Index
            }
			uni.navigateTo({
                url: `${url}?param=${encodeURIComponent(JSON.stringify(param))}`
			});
        },
        // 一级分类
        async getLev1Data() {
            var params = {
                'parentId': '0',
                'pageNum': 1,
                'pageSize': 10
            };
            var data = await Api.apiCall('get', Api.sort.findSort, params);
            this.lev1Data = data;
            this.$nextTick(function() {
                this.active = 0;
            });
        },
        // 二级分类
        async getLev2Data(id) {
            var params = {
                'topCategoryId': id
            };
            var data = await Api.apiCall('get', Api.sort.findLev2Sort, params);
            this.lev2Data = data;
        }
    }
}
</script>

<style lang="less">
page,
.page-container {
	height: 100%;
	overflow: hidden;
	background: #F5F5F5;
}

.page-container {
	display: flex;
	flex-direction: row;
}

.menu-container {
	flex-basis: 192rpx;
	min-width: 192rpx;
}

.menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #777777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item--active {
	position: relative;
	background: #FFFFFF;
	font-size:28rpx;
	font-weight:500;
	color: #5AC2FF;
	&::after {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 32rpx;
		background: #5AC2FF;
	}
}

.main-container {
    flex-grow: 1;
    // height: calc(100vh - 80rpx);
    background-color: #fff;
}

.main-part {
	padding: 40rpx 18rpx 30rpx 18rpx;
	width: calc(100vw - 192rpx);
	box-sizing: border-box;
}

.main-part-caption {
	font-size:24rpx;
	font-weight:500;
	color:rgba(51,51,51,1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.main-part-item {
	width: 33.3%;
	max-width: 33.3%;
	margin-top: 30rpx;
}

.main-part-item-img {
	width:80rpx;
	height:98rpx;
	margin: 0 auto;
}

.main-part-item-txt {
	margin-top: 22rpx;
	text-align: center;
	font-size:22rpx;
	font-weight:400;
	color:rgba(51,51,51,1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
